<template>

  <div class="dashboard-container">
    <div id="container">
      <el-form :inline="true" align="center">
        <el-form-item label="图书名称"><el-input v-model="name" placeholder="请输入图书名称"></el-input></el-form-item>
        <el-form-item label="作者"><el-input v-model="author" placeholder="请输入作者名称"></el-input></el-form-item>
        <el-form-item label="出版社"><el-input v-model="press" placeholder="出版社"></el-input></el-form-item>
        <el-button type="primary" @click="pageQuery()">查询</el-button>
        <router-link to="/emp-report/AddAndUpdate">
          <el-button type="primary" style="margin-left: 10px">添加</el-button>
        </router-link>
      </el-form>
    </div>
    <el-table :data="rows" stripe style="width: 100% " @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="name" label="名称" align="center"></el-table-column>
      <el-table-column prop="author" label="作者" align="center"></el-table-column>
      <el-table-column prop="press" label="出版社" align="center"> </el-table-column>
      <el-table-column prop="isbn" label="ISBN" align="center"></el-table-column>
      <el-table-column prop="publishTime" align="center" label="出版时间"> </el-table-column>
      <el-table-column prop="price" align="center" label="定价"></el-table-column>
      <el-table-column prop="storage" align="center" label="库存"></el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" style="margin-left: 10px" @click="getById(scope.row.isbn)">修改</el-button>
          <el-button type="primary" size="small" style="margin-left: 10px" @click="del(scope.row.isbn)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination align="center" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="page" :background="background" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
    </el-pagination>
  </div>



</template>

<script>
import { page, deleteById,getById} from '@/api/book'


export default {
  data() {
    return {
      name: null, //书本名称
      author: null, //作者
      press: null,  //出版社
      background: true,
      // 每页显示的条数
      pageSize: 5,
      page: 1,
      // 总记录数
      total: 0,
      rows: [],

      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
      },
      formLabelWidth: '120px'
    }
  },

  methods: {
    //分页查询
    pageQuery() {
      const params = {
        name: this.name,
        author: this.author,
        press: this.press,
        page: this.page,
        pageSize: this.pageSize,
      }

      //发送Ajax请求,访问后端服务,获取分页查询
      page(params).then(res => {
        if (res.data.code === 1) {
          // this.records = res.data.data.records
          this.total = res.data.data.total
          this.rows = res.data.data.rows
        }
      })
    },

    getById(isbn) {
            this.$router.push({
                path: '/emp-report/update',
                query: { isbn: isbn }
            })
        },

    //删除
    del(isbn) {
            this.$confirm(`此操作将永久删除ISBN=${isbn}的数据, 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
              deleteById(isbn)
                    .then(res => {
                        if (res.data.code === 1) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            this.pageQuery()
                        } else {
                            this.$message({
                                type: ' error',
                                message: '删除失败!'
                            })
                            
                        }
                    })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
    handleSizeChange(val) {
      this.pageSize = val
      this.pageQuery()
    },
    handleCurrentChange(val) {
      this.page = val
      this.pageQuery()
    },
    // 监控多选框事件
    handleSelectionChange(selection) {
      this.selectNum = selection.length;
      this.selection = selection;
    }
  },

  
  // 服务启动后执行
  created() {
    this.pageQuery();
  },

}



</script>

<style>
.size {
  height: 100%;
  width: 35%;
}
</style>